<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <script src="/js/include.js"></script>
    <script src="/js/rsaEncrypt.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        html,body{height:100%}
        .login {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-size: cover;
        }
        .title {
            margin: 0 auto 30px auto;
            text-align: center;
            color: #707070;
        }

        .login-form {
            border-radius: 6px;
            background: #ffffff;
            width: 385px;
            padding: 25px 25px 5px 25px;
        }
        .login-tip {
            font-size: 13px;
            text-align: center;
            color: #bfbfbf;
        }
        .login-code {
            width: 33%;
            display: inline-block;
            height: 38px;
            float: right;
        }
    </style>
</head>
<body >
<div id="app" style="height:100%">
    <div class="login" style="background-image:url(http://background-images.oss-cn-beijing.aliyuncs.com/2.jpg)">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
            <h3 class="title">
                BASE-ADMIN 后台管理系统
            </h3>
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" type="text" auto-complete="off" placeholder="账号">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForm.password" prefix-icon="el-icon-key" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
                </el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input v-model="loginForm.code" prefix-icon="el-icon-circle-check" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
                </el-input>
                <div class="login-code">
                    <img :src="codeUrl" @click="getCode">
                </div>
            </el-form-item>
            <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
                记住我
            </el-checkbox>
            <el-form-item style="width:100%;">
                <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
                    <span v-if="!loading">登 录</span>
                    <span v-else>登 录 中...</span>
                </el-button>
            </el-form-item>
        </el-form>
        <!--  底部  -->
        <div id="el-login-footer">
            <span> ⋅ </span>
            <a href="http://www.beian.miit.gov.cn" target="_blank"></a>
        </div>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            Background: "",
            codeUrl: '',
            cookiePass: '',
            loginForm: {
                username: 'test',
                password: '123456',
                rememberMe: false,
                code: '',
                uuid: ''
            },
            loginRules: {
                username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
                password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
                code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
            },
            loading: false,
            redirect: undefined
        },
        methods: {
            getCode() {
                $.ajax({
                    type: "get",
                    url: BASE_PATH + "/auth/captcha",
                    success: function (data) {
                        vm.codeUrl = data;
                    }
                });
            },
            initCookie() {
                // 如果cookie有用户名和密码 跳到首页
                const username = getCookie('username');
                const password = getCookie('password');
                const rememberMe = getCookie('rememberMe');
                let obj = {
                    username: username,
                    password: password,
                    rememberMe: rememberMe
                };
                if(username && password) {
                    rememberMeSetting(obj);
                    window.location.replace(BASE_PATH + "/index.html");
                }

            },
            handleLogin() {
                vm.loading = true;

                // 验证表单
                this.$refs["loginForm"].validate((valid) => {
                    if (!valid) {
                        vm.loading = false;
                        return false;
                    }

                    let obj = JSON.parse(JSON.stringify(vm.loginForm));
                    obj.password = RSA_ENCRYPT(obj.password);
                    this.login(obj);
                });
            },
            login(obj) {
                $.ajax({
                    type: "post",
                    url: BASE_PATH + "/auth/login",
                    data: JSON.stringify(obj),
                    contentType: "application/json;charset=UTF-8",
                    success: function () {
                        rememberMeSetting(obj);
                        window.location.replace(BASE_PATH + "/index.html");
                    },
                    error: function (data) {
                        vm.loading = false;
                        errorMessage(data.responseJSON.message);
                        vm.getCode();
                    }
                });
            }
        },
        created:function () {
            // 获取验证码
            this.getCode();
            // 获取用户名密码等Cookie
            this.initCookie();
        },
        mounted:function(){

        },
        watch:{		//监听

        }
    });

    function rememberMeSetting(obj) {
        if (obj.rememberMe) {
            setCookieUserInfo(obj);
        } else {
            delCookieUserInfo();
        }
    }
    function aaa() {
        // 还可以直接把参数拼接在url后边
        axios.get('/auth/captcha',{
        }).then(function(res){
            return res;
        }).catch(function (error) {
            console.log(error);
        });
    }
</script>
</html>
